<template>
    <div >
        <div class="top" id="top1">
             <topA></topA>
             <topB></topB>
             <topC></topC>
        </div>
        <div class="top" id="top2">
            <topE class="botton1"></topE>
            <topD class="otton2"></topD>
        </div>
        <div class="toptitle">
            <i class="el-icon-s-cooperation on"></i>
        </div>
        <div class="toptitle1">
            <i class="el-icon-s-custom on"></i>
        </div>
        <div class="toptitle2">
            <i class="el-icon-camera-solid on"></i>
        </div>
    </div>
</template>
<script>
import topA from '../../components/Tongji/topA'
import topB from '../../components/Tongji/topB'
import topC from '../../components/Tongji/topC'
import topD from '../../components/Tongji/topD'
import topE from '../../components/Tongji/topE'
import {getindex} from "@/api/statistics/statistics";

export default {
    components:{
         topA,
         topB,
         topC,
         topD,
         topE,

    }

}
</script>
<style scoped lang="scss">
.top{
    display: flex;
    margin-top: 6px;
}
#top1{
    margin-left: 11px;
}
#top2{
    margin-left:5px ;
}
.toptitle{
    background-color: rgba(3, 218, 18, 0.3);
    width: 50px;
    height: 50px;
    border-radius: 13px;
    position: absolute;
    top: 31px;
    padding:5px;
    left: 29%;
    .on{
   font-size: 40px;
   color:rgb(0, 207, 14);
 }
}

.toptitle1{
    background-color:  rgba(255, 221, 0, 0.3);
    width: 50px;
    height: 50px;
    border-radius: 13px;
    position: absolute;
    top: 31px;
    left: 62%;
    z-index: 999;
    padding:4px;
    .on{
   font-size: 40px;
   color:rgb(255, 221, 0);
 }

}
.toptitle2{
    background-color: rgba(233, 31, 31, 0.3);
    width: 50px;
    height: 50px;
    border-radius: 13px;
    position: absolute;
    top: 31px;
    padding:5px;
    left: 95%;
    .on{
   font-size: 40px;
   color:rgb(194, 29, 29);
 }
}
.toptext1{
    font-size: 28px;
}
.toptext2{
    margin-top: 9px;
}

</style>
